﻿<div class="demo-description" id="MultipleSelection">
    <h2><DemoNavLink Link="ListBox#MultipleSelection" />List Box - Multiple Selection</h2>
    <p>
        To enable multiple selection in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2">List Box</a>, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.SelectionMode">SelectionMode</a> property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.SelectionMode">ListBoxSelectionMode.Multiple</a>.
    </p>
    <p>
        <ul>
            <li>If the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes">ShowCheckboxes</a> option is enabled, users can click individual items and corresponding checkboxes or hold <kbd>Shift</kbd> to select a range of items.</li>
            <li>If the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes">ShowCheckboxes</a> option is disabled, users can press <kbd>Ctrl</kbd> to select individual items or hold <kbd>Shift</kbd> to select a range of items.</li>
        </ul>
    </p>
</div>

<div class="row" style="margin-left: -10px; margin-right: -10px; max-width: 1120px">
    <div class="col-12 col-md-6" style="padding-left: 10px; padding-right: 10px;">
        <DxListBox Data="@Staff.DataSource"
                   TextFieldName="@nameof(Person.Text)"
                   SelectionMode="ListBoxSelectionMode.Multiple"
                   ShowCheckboxes="@ShowCheckboxes"
                   @bind-Values="@Values"
                   style="height: 232px;">
        </DxListBox>
    </div>
    <div class="col-12 col-md-6 mt-3 m-md-0" style="padding-left: 10px; padding-right: 10px;">
        <div class="card" style="height: 232px;">
            <div class="card-header bg-transparent text-body py-1 border-bottom-0 font-weight-bold">Selected items:</div>
            <div class="card-body p-0 overflow-auto">
                <ul class="list-group list-group-flush bg-transparent border-0">
                    @foreach (var item in Values)
                    {
                        <li class="list-group-item bg-transparent text-body py-1 border-0">@item.Text</li>
                    }
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="code-snippet card demo-card-wide">
    <CodeSnippetHeader DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2#item-selection"/>
    <div class="card-footer text-muted">
        <div class="custom-control custom-checkbox" style="margin: 1em 0 -1em .5em">
            <input type="checkbox" class="custom-control-input" id="ShowCheckboxes" checked="@ShowCheckboxes" @bind-value="@ShowCheckboxes" />
            <label class="custom-control-label" for="ShowCheckboxes"><b class="hljs-attr" style="white-space: nowrap;"> ShowCheckboxes</b></label>
        </div>
        <CodeSnippet_Editors_ListBox_MultipleSelection></CodeSnippet_Editors_ListBox_MultipleSelection>
    </div>
</div>

@code {
    bool ShowCheckboxes { get; set; } = true;
    IEnumerable<Person> Values { get; set; } = Staff.DataSource.Take(2);
}
